<template>
    <div style="background: #fff;height:100vh; width: 100%;">
        <div v-show="homeShow"  class="box-login" >
            <img style="margin-top:10px;" src="../assets/img/common-icon-ArrowLeftBlack.svg" alt="" @click="jumpHome">
            <div style="margin-top:85px;display: flex;justify-content: center;">
                <div>
                    <img style='width: 82px;' src="../assets/img/logo.svg" alt="">
                    <div style="text-align: center;margin-top: 10px;font-size: 20px;color: #FF2E67;font-weight: bold;">淘金客</div>
                </div>
            </div>
            <div style="padding:0 20px;margin-top: 65px;">
                <button style="background: #FF2E67;border:none;width:100%;border-radius: 24px;height:40px;color: #fff;font-size: 16px;" @click="registerJump">手机号登录</button>
            </div>
            <div style="position: absolute;bottom: 60px;display: flex;justify-content: center;width: 100%;">
                <div style="text-align: center;margin-left: -40px;">
                    <van-checkbox style="display: inline-block;position: relative;top: 2px;" icon-size="15px" v-model="checked" checked-color="#FF2E67"></van-checkbox>
                    <span>我已阅读并同意</span>
                    <span style="color: #FF2E67;">《用户协议》</span>和
                    <span style="color: #FF2E67;">《隐私政策》</span>
                </div>
            </div>
<!--             <div style="display: flex;justify-content: center;color:#fff;">-->
<!--                <div style="margin-right: 20px;" @click="homeShow=false" v-show="!homeShow">-->
<!--                    <van-icon name="contact" />-->
<!--                    <span>账号登录</span>-->
<!--                </div>-->
<!--                <div>-->
<!--                    <van-icon name="user-circle-o" />-->
<!--                    <span @click="registerJump">注册</span>-->
<!--                </div>-->
<!--            </div>-->
        </div>
<!--         <div v-show="!homeShow" style="padding:20px;">-->
<!--           <img style="width:22px;transform: rotate(180deg);" src="../assets/img/common-icon-moreWhite.svg" alt="" @click="homeShow=true">-->
<!--           <div style="padding:0 10px;">-->
<!--               <div style="color: #fff;font-size: 18px;margin-top:50px;">账号密码登录</div>-->
<!--               <div style="position: relative;">-->
<!--                    <img @click="" src="../assets/img/layer-icon-close.svg" style="position: absolute;right: 5px;top: 22px;" alt="">-->
<!--                    <input class="inputSty" v-model="userName" style="margin-top:10px;" type="text" placeholder="请输入您的用户账户">-->
<!--               </div>-->
<!--               <div v-if="showPassWord" style="position: relative;">-->
<!--                    <img @click="" src="../assets/img/layer-icon-close.svg" style="position: absolute;right: 5px;top: 22px;" alt="">-->
<!--                    <input class="inputSty" v-model="userPassword" style="margin-top:10px;" type="password" placeholder="请输入您的密码">-->
<!--               </div>-->
<!--               <div v-else style="position: relative;">-->
<!--                    <img @click="" src="../assets/img/layer-icon-close.svg" style="position: absolute;right: 5px;top: 22px;" alt="">-->
<!--                    <input class="inputSty" v-model="userPassword" style="margin-top:10px;" type="text" placeholder="请输入您的密码">-->
<!--                </div>-->
<!--           </div>-->
<!--           <div>-->
<!--                <button style="margin-top:50px;background: rgb(255,235,185);border:none;width:100%;border-radius: 24px;height:40px;">登录</button>-->
<!--            </div>-->
<!--            <div style="text-align: center;color:#fff;margin-top:20px;">-->
<!--                <span>登录即代表同意</span>-->
<!--                <span>《用户协议》</span>和-->
<!--                <span>《隐私政策》</span>-->
<!--            </div>-->
<!--        </div>-->
    </div>

  </template>

  <script>
  import { Checkbox, CheckboxGroup,Icon,Toast } from 'vant';
  export default {
    name: 'login',
    components:{
      [Checkbox.name]:Checkbox,
      [CheckboxGroup.name]:CheckboxGroup,
      [Icon.name]:Icon,
    },
    data () {
      return {
        checked:false,
        homeShow:true,
        userName:"",
        userPassword:"",
        showPassWord:true
      }
    },

    computed: {

    },
    mounted() {
        
    },
    methods: {
        registerJump(){
            // this.homeShow=false;
            if(this.checked){
                this.$router.push('/register')
            }else{
                Toast('请先查看协议并通过')
            }
        },
        jumpHome(){
            this.$router.replace('/');
        }
    },
  }
  </script>

  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
      .box-login{
          padding-top:  20px;
          margin: 0 20px;
      }
  </style>
